const view_NasMusicCopy =
{
    name: "view_NasMusicCopy",
    template: 
`<div style="width: 100%; height:100%;">
    <div style="display: flex; align-items: center;">
        <input ref="upload0" id="btnFileInput" type="file" multiple accept=".m3u" style="display: none;" @change="upload0_ChangeEvent_Handler" />
        <el-button type="primary" size="small" icon="el-icon-folder-opened" @click="btnImport_m3u_File">导入m3u文件</el-button>    
        <el-button type="primary" size="small" icon="el-icon-refresh" :disabled="!cpu_BtnCalcCMD_IsEnabled" @click="btnCalcCMD_OnClick">重新生成</el-button>        
        <div class="ml-8" style="width: 200px;">导出到 NAS 的路径：</div>
        <el-input v-model="mPath" placeholder="请输入导出的路径"></el-input>        
    </div>

    <el-divider content-position="left">{{cpuListInfo}}</el-divider>

    <div style="display: flex; width: 100%; height:100%; gap: 60px;">
        <el-table ref="table0" 
            :data="mList" 
            style="width: 50%;"
            height="750"
            v-loading="mIsBusy"
            :element-loading-text="mBusyContent"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column prop="NoInfo" label="序号" width="50"></el-table-column>
            <el-table-column prop="DisplayName" label="文件名"></el-table-column>
        </el-table>

        <el-input
            type="textarea"
            v-model="mCMD"
            style="width: 50%;"
            :autosize="{ minRows: 35, maxRows: 35 }"
            placeholder="请点击生成"
            readonly>
        </el-input>
    </div>
</div>`,
    data: function ()
    {
        return {
            mPath: "/volume3/downloads/car_usb_music/",
            mList: [],
            mSelectedList: [],
            mListInfo: "",
            mCMD: "",
            mIsBusy: false,
            mBusyContent: ""
        };
    },
    mounted: function() {
        
    },

    computed: {
        cpu_BtnCalcCMD_IsEnabled: function() {
            const r = this.mSelectedList != null && this.mSelectedList.length > 0;
            return r;
        },

        cpuListInfo: function() {
            if(this.mList == null || this.mList.length == 0)
                return "请导入 m3u 文件";

            let r = `共 ${this.mList.length} 首歌曲`;

            if(this.mSelectedList != null && this.mSelectedList.length > 0)
                r += `, 已选择 ${this.mSelectedList.length} 首歌曲`;
            
            return r;
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },

        handleSelectionChange: function(arr) {
            this.mSelectedList = arr;
        },

        btnImport_m3u_File: function() {            
            this.$refs.upload0.click();
        },

        upload0_ChangeEvent_Handler: async function (event) {
            this.mIsBusy = true;

            this.mList = []; // 清空
            let tempList = [];

            console.log(`进入 upload0_ChangeEvent_Handler`);
            console.log(`用户选择共 ${event.target.files.length} 个文件`);

            const files = event.target.files;
            const that = this;
            
            const maxPadLen = files.length.toString().length; // 总文件数字的长度, 例如 1234, 长度为 4。

            // 读取m3u文件内容

            console.log("event:", event);
            console.log("event.target:", event.target);

            let component = event.target; // 控件对象被保存在 event.target 和 event.srcElement 中
            console.log("用户确认了选择文件。", component.files);
            console.log(`共选择 ${component.files.length} 份文件`);
            console.log("属性 files 的类型", Object.prototype.toString.call(component.files)); // 属性 files 的类型为 FileList

            for (let index = 0; index < component.files.length; index++) {
                // 只用一个fileReader读取多个文件时会报错 Uncaught DOMException: Failed to execute 'readAsText' on 'FileReader': The object is already busy reading Blobs.
                // 所以需要new出多个 FileReader
                let fileReader = new FileReader();

                let selectedFile = component.files[index];
                fileReader.readAsText(selectedFile);

                fileReader.onload = function () {
                    that.$nextTick(() => {
                        that.calcInfo(this.result);
                    });
                };
            }

            console.log("target.value: ", event.target.value);

            // !!!坑点!!! 如果连续两次导入的文件路径一致, 则不会触发 change 事件
            event.target.value = null;

            this.mIsBusy = false;
        },

        calcInfo(str) {
            const r = [];
            const arr = str.split(/\r?\n/);
            
            let fileIndex = 0;

            for (let index = 0; index < arr.length; index++) 
            {
                const item = arr[index];
                if(item == null || item.length == 0 || item == "#EXTM3U") { continue; }

                const m = {};
                m.Index = fileIndex++;
                m.No = m.Index + 1;
                m.NoInfo = `${m.No.toString().padStart(3, '0')}`;
                m.OriginData = item;
                m.DisplayName = item.substring(item.lastIndexOf('/') + 1);                
                r.push(m);
            }
            
            this.mList = r;

            // !!!遇到的坑!!! Vue 的数据绑定是异步的, 所以这里需要等到下一次 DOM 更新循环结束之后, 才能获取到最新的 DOM 状态
            this.$nextTick(() => {
                r.forEach(row => this.$refs.table0.toggleRowSelection(row)); // 选中所有行

                this.btnCalcCMD_OnClick();
            });
        },

        btnCalcCMD_OnClick: function () {
            this.mSelectedList.forEach( m => m.Command = `cp '${m.OriginData}' '${this.mPath}${m.NoInfo}_${m.DisplayName}'`);
            const r = this.mSelectedList.map(i => i.Command).join("\n");
            this.mCMD = r;
        },        
    }
};